<template>
  <a-card>
    <div class="card-header">
      <a-space>
        <span class="card-header-title">权限列表</span>
      </a-space>
      <permission-create/>
    </div>
    <a-alert message="权限列表为内置规则，不可修改" class="margin-bottom" banner/>
    <a-table :data-source="store.permissions" :columns="columns" :pagination="tablePageConfig">
      <template #bodyCell="{column,record}">
        <template v-if="column.key === 'action'">
          <div class="table-action">
            <span>编辑</span>
            <span @click="handleDelete(record.id)">删除</span>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
</template>
<script setup lang="ts">
import {usePermissionStore} from "@/store/permission";
import {onMounted} from "vue";
import {tablePageConfig} from "@/config";
import PermissionCreate from "@/views/admin/components/PermissionCreate.vue";
import {Modal} from 'ant-design-vue'

const store = usePermissionStore()

const columns = [
  {title: '权限名称', dataIndex: 'title', key: 'title',width: 240},
  {title: '权限标识', dataIndex: 'key', key: 'key', width: 200,},
  {title: '权限类型', dataIndex: 'type', key: 'type', width: 200,},
  {title: '模块', dataIndex: 'model', key: 'model', width: 200,},
  {title: '权限路径', dataIndex: 'path'},
  {title: '管理', key: 'action', width: 120},
]
onMounted(()=>{
  store.getPermissions()
})
const handleDelete = (id:number) => {
  Modal.confirm({
    title: '确认删除该权限吗？',
    content: '删除后不可恢复',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
     await store.deletePermission(id)
    }
  })
}
</script>

<style scoped>

</style>